<template>
	<view class="">
		<img class="img" :src="data.info.gameImg" alt="">
		<view class="content">
			<view class="title-box">
				<view class="title">{{data.info.name}}</view>
				<button class="shareBtn" open-type="share"> <img class="share" src="../../../static/img/img/share.png"
						alt=""></button>
			</view>
			<view class="browse">浏览{{data.info.view}}次</view>
			<view class="jiage flex-justify-s">
				<text class="jiage-t">¥{{data.info.priceStart}}-{{data.info.priceEnd}}</text>
				<text class="state">报名中</text>
			</view>
			<view class="">
				<view class="bs-info flex-justify-s">
					<view class="flex-align-center">
						<img class="icon" src="../../../static/img/img/fx-time.png" alt="">
						<text class="title">报名时间 </text>
					</view>
					<text class="right">{{data.info.applicationStartTime}}-{{data.info.applicationEndTime}}</text>
				</view>
				<view class="bs-info flex-justify-s">
					<view class="flex-align-center">
						<img class="icon" src="../../../static/img/img/fx-time.png" alt="">
						<text class="title">比赛时间 </text>
					</view>
					<text class="right">{{data.info.gameStartTime}}-{{data.info.gameEndTime}}</text>
				</view>
				<view class="bs-info flex-justify-s">
					<view class="flex-align-center">
						<img class="icon" src="../../../static/img/img/fx-dingwei.png" alt="">
						<text class="title">地址 </text>
					</view>
					<view class="right flex-align-center">
						<text>{{data.info.address}}</text>
						<uv-icon name="arrow-right" color="#707070" size="13"></uv-icon>
					</view>
				</view>
				<view class="bs-info flex-justify-s">
					<view class="flex-align-center">
						<img class="icon" src="../../../static/img/img/tuikuan.png" alt="">
						<text class="title">退款规则 </text>
					</view>
					<text class="right">{{data.info.isRefund?'随时可退':'不支持退款'}}</text>
				</view>
			</view>
			<!-- 详情 -->
			<view class="details-box">
				<view class="title">赛事详情</view>
				<!-- <view class="" ></view> -->
				<rich-text :nodes="data.info.info"></rich-text>
			</view>
		</view>

		<view class="btn-b ">
			<navigator hover-class="none" :url="`/pages/subpackagesSon/competition/signUp/signUp?id=${data.info.id}`"
				class="blue-btn">立即报名</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onShareAppMessage
	} from "@dcloudio/uni-app";
	import {
		getDetailGameById
	} from "../../../../requestApi/api.js";
	const data = ref({
		id: '',
		info: {}
	})
	onLoad((e) => {
		data.value.id = e.id;
		console.log(e.id)
		getDetails();
	})
	const getDetails = () => {
		getDetailGameById({
			id: data.value.id
		}).then(res => {
			data.value.info = res.data;
		})
	};

	//分享
	onShareAppMessage(() => {
		return {
			title: '赛事',
			path: `/pages/subpackagesSon/competition/details/details?id=${data.value.id}`,
		}
	})
</script>

<style lang="scss">
	.img {
		width: 100vw;
		height: 440rpx;
		margin-bottom: 40rpx;
	}

	.content {
		padding: 0 44rpx 200rpx;

		.title-box {
			display: flex;
			align-items: flex-start;
			margin-bottom: 10rpx;

			.title {
				font-size: 30rpx;
				color: #2C2C2C;
				flex: 1;
				// font-weight: bold;
			}

			.shareBtn::after {
				border: none;
			}

			.shareBtn {
				width: 36rpx;
				height: 40rpx;
				padding: 0;
				margin: 0 0 58rpx 0;
				line-height: normal;
				background: transparent;
			}

			.share {
				width: 36rpx;
				height: 36rpx;

			}
		}

		.browse {
			font-size: 24rpx;
			color: #A5A5A5;
			margin-bottom: 24rpx;
		}

		.jiage {
			border-bottom: 2rpx solid #F2F2F2;
			padding-bottom: 10rpx;
			margin-bottom: 20rpx;

			.jiage-t {
				font-size: 48rpx;
				color: #F26D61;
				font-weight: bold;
			}

			.state {
				font-size: 24rpx;
				color: #59B13F;
			}
		}


		.bs-info {
			margin-bottom: 20rpx;

			.icon {
				width: 20rpx;
				height: 20rpx;
				margin-right: 8rpx;
			}

			.title {
				font-size: 20rpx;
				color: #A5A5A5;
			}

			.right {
				font-size: 24rpx;
				color: #2C2C2C;
			}
		}

		.details-box {
			margin-top: 20rpx;

			.title {
				font-size: 30rpx;
				color: #2C2C2C;
			}
		}
	}

	::v-deep .uv-icon__icon {
		font-weight: bold !important;
		margin-left: 16rpx;
	}
</style>